<template>
  <view class="ratifyUserBox">
    <view class="title">当前节点</view>
    <view>
      <view v-for="(item, index) in nodeList" :key="index" class="node flex">
        <view class="flex flex-column" :class="index < taskApprove.currentNodeNo ? 'yes' : index == taskApprove.currentNodeNo ? 'cur' : 'no'">
          <view class="dot" />
          <view v-if="index !== nodeList.length - 1" class="line fl1" />
        </view>
        <view class="fl1"> {{ nodeMap[item] }}</view>
        <view v-if="item == 'MD'"> {{ BZ }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ratifyUser',
  props: {
    taskApprove: {
      type: Object,
      default: () => {},
    },
    BZ: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      nodeMap: {
        START: '发起人',
        BM: '业务经理',
        M: '经理',
        FD: '财务总监',
        FM: '费用主管',
        SM: '销售管理经理',
        HRD: '人力总监',
        VD: '副总经理',
        END: '结束',
        ZG: '主管',
        BZ: '部门负责人',
        MD: '总经理',
        CM: '董事长',
      },
      nodeList: [],
      level: 0,
    }
  },
  created() {},
  watch: {
    taskApprove(n) {
      this.nodeList = this.taskApprove.flowStepNode.split(',')
      console.log(this.nodeList)
    },
  },
  mounted() {},
  computed: {},
  methods: {
    getNodeIndexClass(index) {
      // console.log('i=' + JSON.stringify(index) + ',this.taskApprove.currentNodeNo=' + this.taskApprove.currentNodeNo)
      // if (index < this.taskApprove.currentNodeNo) {
      //   return 'yes'
      // } else if (index === this.taskApprove.currentNodeNo) {
      //   return 'cur'
      // } else {
      //   return 'no'
      // }
    },
  },
}
</script>

<style scoped lang="scss">
.ratifyUserBox {
  padding: 20rpx;
  background: white;
  margin-top: 20rpx;
  .node {
    font-size: 26rpx;
    .yes,
    .no,
    .cur {
      min-height: 80rpx;
      margin-right: 30rpx;
      .dot {
        margin-top: 7rpx;
        width: 15rpx;
        height: 15rpx;
        border-radius: 15rpx;
      }
      .line {
        margin-top: 5rpx;
        width: 50%;
      }
    }
    .yes {
      .dot {
        background: #7bb2f8;
      }
      .line {
        border-right: 2rpx solid #7bb2f8;
      }
    }
    .no {
      .dot {
        background: gainsboro;
      }
      .line {
        border-right: 2rpx solid gainsboro;
      }
    }
    .cur {
      .dot {
        background: #368af5;
      }
      .line {
        border-right: 2rpx solid gainsboro;
      }
    }
  }
  .title {
    font-size: 28rpx;
    font-weight: bold;
    margin: 20rpx 0;
  }
}
</style>
